<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
	<title>Template Designer.ResourceExplorer</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta name="author" content="yangzheng@evmtv.com"/>
	<meta name="description" content="EMSP_CMS.TemplateDesigner"/>
	<meta name="x_class" content="com.evmtv.emsp_cms.templateDesigner"/>
	<meta http-equiv="Expires" CONTENT="0">
	<meta http-equiv="Cache-Control" CONTENT="no-cache">
	<meta http-equiv="Pragma" CONTENT="no-cache">
	<link href="../swatlib/SwatWeb/spark/spark.css" rel="stylesheet" type="text/css"/>
	<!--<base target="_self"/>-->
</head>

<style type="text/css">
body							{padding:20px;margin:0px;width:100%;height:100%;color:#ccc;font:normal 14px tahoma;background:#34383E;overflow2:hidden}
#div							{border:1px dotted #cc0}
img { max-width:160px;-ms-interpolation-mode: bicubic; }

/** UI */
.Panel_H						{background:#5F686D url(assets/images/panel_orn_h.png) repeat-y;border-left:1px solid #828A90;border-top:1px solid #828A90;border-right:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a}
.Panel_V						{background:#5F686D url(assets/images/panel_orn_v.png) repeat-x;border-left:1px solid #828A90;border-top:1px solid #828A90;border-right:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a}

.ListItem						{float:left;width:200px;height:200px;text-align:center;margin:1px;color:#888;background:#333;border-left:1px solid #444;border-top:1px solid #444;border-right:1px solid #111;border-bottom:1px solid #111}
.ListItem_Active				{float:left;width:200px;height:200px;text-align:center;margin:1px;color:#cc0;background:#369;border-left:1px solid #888;border-top:1px solid #888;border-right:1px solid #025;border-bottom:1px solid #025}
.ListItem_ImageFrame			{border:1px solid #111;margin-top:10px;text-align:center;background:#2c2c2c;border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #444;border-bottom:1px solid #444}
.ListItem_Image					{border2:1px solid #111;margin2:5px}
.ListItem_Info					{margin-top:5px;font:normal 12px Consolas;color:#ccc;cursor:default}
.ListItem_Text					{margin-top:5px;font:normal 12px Tahoma;cursor:default}
/** named */
#ePage_Main						{position2:absolute;margin2:20px;width:100%;height:100%;overflow2:hidden}
.eSheet							{position:absolute;width:100%;height:100%;background2:#000}

/** spark override */
.SxSheetGroup					{width:100%;height:100%;}
.SxSheetGroup_Tab				{width:120px;font:bold 12px tahoma;padding:0px 8px 0px 8px;color:#ccc;background:url(assets/images/spark_sheetgroup_bar.png) no-repeat 0 0;border:1px solid #000}
.SxSheetGroup_Tab_h				{width:120px;font:bold 12px tahoma;padding:0px 8px 0px 8px;height:22px;color:#ee0;background:url(assets/images/spark_sheetgroup_bar.png) no-repeat 0 -24;border:1px solid #000}
.SxSheetGroup_Tab_Active		{width:120px;font:bold 12px tahoma;padding:0px 8px 0px 8px;height:22px;color:#fff;background:url(assets/images/spark_sheetgroup_bar.png) no-repeat 0 -48;border:1px solid #000}
.SxSheetGroup_Content			{width:100%;height:100%;overflow:hidden;border:2px inset #5F686D;padding:0px}

.pagePanel						{border:0px solid #ffffff;width:100%;height:30px;float:left;}
.pagePanel a					{margin:5px;text-decoration: none;width:30px;height:30px;border:1px solid #BBD1F2;background: #1A73D8;color:#FBB956;text-align: center;vertical-align: middle;line-height:30px;display:table-cell;}
</style>

<!--import libs-->
<script type="text/javascript" language="javascript" src="../swatlib/SwatWeb/swat3.js"></script>
<script type="text/javascript" language="javascript" src="../swatlib/SwatWeb/spark/spark.common.js"></script>
<script type="text/javascript" language="javascript" src="../swatlib/SwatWeb/spark/Group.js"></script>
<script type="text/javascript" language="javascript" src="../swatlib/SwatWeb/spark/SheetGroup.js"></script>
<script type="text/javascript" language="javascript" src="../swatlib/SwatWeb/spark/QuickTips.js"></script>
<script type="text/javascript" language="javascript" src="assets/data/D_config.js"></script>

<!--import data-->

<script type="text/javascript">
var ResExplorer =
{
	control:
	{
		sheetgrp_Main: 0
	},

	init: function()
	{
		// 初始化工作页
		with( this )
		{
			control.sheetgrp_Main = new scumix.swat.spark.SheetGroup( {container:'ePage_Main', animSpeed:0} );
			control.sheetgrp_Main
				.addSheet( {title:'图片 (Image)', elem:['eSheet_Image']} )
				.addSheet( {title:'视频 (Video)', elem:['eSheet_Video']} )
				.addSheet( {title:'音频 (Audio)', elem:['eSheet_Audio']} )
				.addSheet( {title:'数据 (Data)', elem:['eSheet_Data']} )
				.showSheet(0);

			queryResource( 'image' );
		}
	},

	relayout: function()
	{
		var dw = document.body.clientWidth,
			dh = document.body.clientHeight;

		$('ePage_Main').css('height', dh - 80).css('width', dw - 40 );
		//$('eSheet_Image,eSheet_Video,eSheet_Audio,eSheet_Data').css('height', dh-90);
	},

	queryResource: function( T )
	{
		this.clearGrid();
		$.ajax.load(
		{
			 url: DS_Config.interfaces.resource.query
			,param: 'fresourcetype=图片&fsearchkey=模版背景图&start=0&limit=9&fdeleted=0'
			,onData: function(R)
			{
				eval('var json = ' + R +';');
				var pCount = Math.ceil(json.total / 9);
				var P = ResExplorer.page(json.total,9,1);
				P = '<font size="2" color="#fffff" style="float:left;margin-top:10px;">总共：'+pCount+'页   '+json.total+'条数据</font>' + P;
				ResExplorer.bindData(json,P);
			}

			,onError: function( C, S )
			{
				$E('eSheet_Image_Content').innerHTML = '(加载数据失败)';
			}
		});
	},
	gotoPage : function(start,currPage){
		this.clearGrid();
		$.ajax.load(
		{
			 url: DS_Config.interfaces.resource.query
			,param: 'fresourcetype=图片&fsearchkey=模版背景图&start='+start+'&limit=9&fdeleted=0'
			,onData: function(R)
			{
				eval('var json = ' + R +';');
				var pCount = Math.ceil(json.total / 9);
				var P = ResExplorer.page(json.total,9,currPage);
				P = '<font size="2" color="#fffff" style="float:left;margin-top:10px;">总共：'+pCount+'页   '+json.total+'条数据</font>' + P;
				ResExplorer.bindData(json,P);
			}

			,onError: function( C, S )
			{
				$E('eSheet_Image_Content').innerHTML = '(加载数据失败)';
			}
		});
	},
	page : function(totalCount,limit,currPage){
		var pHtml = '';
		if(totalCount > limit){
			var pageCount = Math.ceil(totalCount / limit);
			var over = true;
			var overStr = '<a href="javascript:void(0)" style="background:balck;border:1px solid #ccc;color:#ffffff;cursor:text;">···</a>';
			if(pageCount > 5){
				var index = 0,showSize = 5;
				if(currPage > 4){
					pHtml += overStr;
					index = currPage - 3;
					showSize = currPage + 2;
					if(currPage > (pageCount - 4)){
						showSize = pageCount;
						over = false;
					}
				}
				if(over){
					for(var i = index; i < showSize; i++){
						if(currPage == (i + 1)) 	{
							pHtml += '<a href="javascript:void(0)" style="background:balck;border:1px solid #ccc;color:#ffffff;cursor:text;">'+ (i + 1) +'</a>    ';
						}else{		
							pHtml += '<a href="javascript:ResExplorer.gotoPage('+(i*limit)+','+(i + 1)+')" >'+ (i + 1) +'</a>    ';
						}
					}
					pHtml += overStr;
				}else{
					for(var i = (pageCount - 5);i < pageCount; i++){
						if(currPage == (i + 1)) 	{
							pHtml += '<a href="javascript:void(0)" style="background:balck;border:1px solid #ccc;color:#ffffff;cursor:text;">'+ (i + 1) +'</a>    ';
						}else{		
							pHtml += '<a href="javascript:ResExplorer.gotoPage('+(i*limit)+','+(i + 1)+')" >'+ (i + 1) +'</a>    ';
						}
					}
				}
			}else{
				for(var i = 0; i < pageCount; i++){
					if(currPage == (i + 1)) 	{
						pHtml += '<a href="javascript:void(0)" style="background:balck;border:1px solid #ccc;color:#ffffff;cursor:text;">'+ (i + 1) +'</a>    ';
					}else{
						pHtml += '<a href="javascript:ResExplorer.gotoPage('+(i*limit)+','+(i + 1)+')" >'+ (i + 1) +'</a>    ';
					}
				}
			}
		}
		return pHtml;
	},
	bindData : function(R,Page){
		try
		{
			var json= R ;
			with( json )
			{
				var fw = 300, fh = 260,
					iw = 280, ih = 200;

				for( var i in source )
				{
					var id = $.makeGlobalId( 'img_' )
						,zoomRate = Math.max( Math.max( source[i].fwidth / iw, 1 ), Math.max( source[i].fheight / ih, 1 ))
						,w = source[i].fwidth / zoomRate
						,h = source[i].fheight / zoomRate
						;

					//source[i].fresourceurl = '../assets/emsp_cms/images/tmp_1.jpg';
					var info =
							'名称: ' + source[i].fassetsname
							+ '\n尺寸: ' + source[i].fwidth+'×'+source[i].fheight
							+ '\n大小: ' + source[i].fsize + ' 字节'
							+ '\n时间: ' + source[i].faddtime
							+ '\n位置: ' + source[i].fresourceurl
							;

					var F= $.createElement( {type:'div', id:id, css:'', attr:{className:'ListItem',title:info} } );
						F.xData = source[i];
						//F.style.background = 'url(' + source[i].fresourceurl + ') no-repeat center';
						//F.style.backgroundSize = 'contain';
						$(F)
							.css('width', fw)
							.css('height', fh)
							.event('mouseover', function()
							{
								this.className = 'ListItem_Active';
							})
							.event('mouseout', function()
							{
								this.className = 'ListItem';
							})
							.event('click', function()
							{
								try
								{
									var _opener = dialogArguments;
									if( _opener && _opener.__popWindowListener )
									{
										_opener.__popWindowListener( {url:this.xData.fresourceurl} );
										close();
									}
								}
								catch( E )
								{

								}
							})
							;

					source[i].fresourceurl = DS_Config.interfaces.resource.host + source[i].fresourceurl;
					var imgFrame = $.createElement( {type:'div', id:id, css:'display:table', attr:{className:'ListItem_ImageFrame'} } );
					$(imgFrame).css('width', iw).css('height', ih).css('line-height', ih);
					F.appendChild( imgFrame );

					var IMG = $.createElement( {type:'img', id:id, css:'verticalAlign:middle', attr:{className:'ListItem_Image',src:source[i].fresourceurl,width:w,height:h} } );
					imgFrame.appendChild( IMG );

					var T = $.createElement( {type:'div', id:id, css:'', attr:{className:'ListItem_Info',innerHTML:source[i].fwidth+'×'+source[i].fheight} } );
					F.appendChild( T );

					var T = $.createElement( {type:'div', id:id, css:'', attr:{className:'ListItem_Text',innerHTML:source[i].fassetsname} } );
					F.appendChild( T );
					
					
					$E('eSheet_Image_Content').appendChild( F );
				}
			}
			
			var T = $.createElement({type:'div',id:'page',css:'textAlign:center',attr:{className:'pagePanel',innerHTML : Page}});
			//F.appendChild( T );
			$E('eSheet_Image_Content').appendChild( T );
		}
		catch( E )
		{
			alert( '加载数据失败: ' + E.message );
		}
	},
	clearGrid : function(){
		$E('eSheet_Image_Content').innerHTML = '';
	}
}

$.pageResize(function()
{
	ResExplorer.relayout();
})

$.pageReady(function()
{
	ResExplorer.relayout();
	ResExplorer.init();

	document.onkeydown = function(E)
	{
		var E = E || event,
			K = E.keyCode;

		if( K == 116 ) $E('eReload').click();
	}
})

</script>

<body>

<div id="ePage_Main"
	class="Panel_V">

	<!--工作页-->
	<div id="eSheet_Image"
		class="eSheet">
		<div id="eSheet_Image_Content" style="width:100%;height:100%;border:1px outset #000;overflow:auto"></div>
	</div>

	<div id="eSheet_Video"
		class="eSheet">(无数据)</div>

	<div id="eSheet_Audio"
		class="eSheet">(无数据)
	</div>

	<div id="eSheet_Data"
		class="eSheet">(无数据)</div>

</div>

<a id="eReload" href="ResourceExplorer.html" style="display:none">reload</a>

</body>
</html>